// 导入自定义的 ajax 工具模块，包含异步请求和登录状态检查函数
import { ajax, isLogin } from '../utils/ajax.js';

// 导入 jQuery 库，用于 DOM 操作和事件处理
import '../lib/jquery.js';

// 导入 layui 库，用于创建和管理 UI 组件
import '../lib/layui/layui.js';

// 立即执行的异步函数，用于初始化页面元素和事件
(async () => {
    // 调用 isLogin 函数检查用户登录状态，并获取用户信息
    let { status, user } = await isLogin();

    // 如果用户已登录（status 为 1）
    if (status === 1) {
        // 切换登录状态的显示，将未登录状态的 'active' 类从 '.off' 元素移除
        // 并为 '.on' 元素添加 'active' 类，表示用户已登录
        $('.off').removeClass('active');
        $('.on').addClass('active');

        // 在页面上显示用户的昵称，并绑定点击事件到个人中心链接
        // 当点击时，使用 location.href 跳转到个人中心页面（./self.html）
        $('.nickname').text(user.nickname);
        $('.self').on('click', () => location.href = './self.html');

        // 为退出登录按钮绑定点击事件
        // 当点击时，弹出确认对话框询问用户是否确定要退出登录
        $('.logout').on('click', async () => {
            if (!confirm('确定要退出登录吗？')) return; // 如果用户取消，则不执行退出操作

            // 从本地存储中获取用户 id 和 token，用于请求注销
            let id = localStorage.getItem('uid');
            let token = localStorage.getItem('token');

            try {
                // 发送异步 GET 请求到 '/users/logout' 接口进行用户注销操作
                // 传递 id 和 token 作为请求参数和头信息
                let { data: { code } } = await ajax.get('/users/logout', { params: { id }, headers: { authorization: token } });

                // 如果服务器响应码不为 1，表示注销失败，抛出异常
                if (code !== 1) {
                    throw new Error('注销失败');
                }

                // 注销成功，从本地存储中移除 token 和 uid
                localStorage.removeItem('token');
                localStorage.removeItem('uid');

                // 切换显示为未登录状态
                $('.off').addClass('active');
                $('.on').removeClass('active');
            } catch (error) {
                // 如果注销过程中发生错误，使用 alert 显示错误信息
                alert('注销失败: ' + error.message);
            }
        });
    }
})();

// 定义一个异步函数 render，用于渲染首页轮播图
async function render() {
    // 发送异步 GET 请求获取轮播图列表
    let { data: { code, list } } = await ajax.get('/carousel/list');

    // 如果服务器响应码不为 1，表示获取轮播图失败，打印错误信息并结束函数
    if (code !== 1) {
        console.log('获取轮播图失败');
        return;
    }

    // 使用 map 函数遍历轮播图列表，为每张图生成 HTML 字符串
    // 然后使用 join 函数将所有图片 HTML 字符串拼接为一个完整的字符串
    let str = list.map(e => `<div><img src="${ajax.defaults.baseURL}/${e.name}" alt="轮播图${e.id}"></div>`).join('');

    // 将生成的 HTML 字符串设置为轮播图容器的 HTML 内容
    $('#carousel > :first-child').html(str);

    // 使用 layui 的 carousel 组件渲染轮播图
    // 设置容器宽度、高度、切换动画方式等参数
    layui.carousel.render({
        elem: '#carousel', // 选择器，指定要渲染轮播图的容器
        width: '1200px', // 设置容器宽度
        height: '600px', // 设置容器高度
        arrow: 'hover', // 设置箭头在悬停时显示
        anim: 'fade' // 设置切换动画为渐变效果
    });
}

// 调用 render 函数执行轮播图渲染操作
render();